@import "../../scssMixin/generateClassName2.module.scss";
@import "../../scss/vars.module.scss";
$--z: 499;
@include z("pop-cover") {
	position: absolute;
	z-index: $--z - 1;
	left: 0;
	bottom: 0;
	right: 0;
	top: 0;
	background-color: rgba(#000, 0.2);
	cursor: pointer;
	transition: all 0.25s ease-out;
	opacity: 1;
	&.transparent {
		opacity: 0;
	}
}
@include z("pop-content") {
	transition: transform .3s cubic-bezier(.16,.22,.22,1.2);
	position: absolute;
	width: 90%;
	max-width: 100%;
	height: 100%;
	right: 0;
	top: 0;
	z-index: $--z;
	box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
	// border-left: 1px solid #e3e6ea;
	// background-color: white;
	@include is("right-hide") {
		transform: translateX(101%);
	}
	@at-root {
		@include z("pop-close") {
			position: absolute;
			left: 0px;
			top: 0;
			bottom: 0;
			z-index: 9999;
			cursor: pointer;
			@include z("btn") {
				height:64px;
				display: flex;
				justify-content: center;
				align-items: center;
				color: $--primary-color;
				background-color: rgba($--primary-color, 0.2);
				border-radius: 0 16px 16px 0;
				font-size: 12px;
				&::before{
					transform: rotate(90deg);
				}
			}
		
		}
	}
}
